
import React, { useMemo, useRef, useEffect, memo } from 'react';
import { PlusOutlined } from "@ant-design/icons";
import { Button, Empty } from 'antd'
import { Scrollbars } from 'react-custom-scrollbars';
import moment from 'moment';
import styles from './index.less'
import SortContent from './sortcontent';


function Alayer({ config, setconfig }) {
    let scrollref = useRef();

    useEffect(() => {
        let curindex = config?.pages?.map(it => it.active).indexOf(true);
        //计算高度总和
        let heightmax = 0;
        config?.pages?.filter((it, i) => i < curindex - 1).map((item, i) => {
            let height = item.height ? item.height : config?.height,
                width = item.width ? item.width : config?.width,
                heightitem = (height / width) * 136;
            heightmax += heightitem + 12;
        })
        scrollref.current.view.scroll({
            top: heightmax,
            left: 0,
            behavior: 'smooth'
        });
    }, [config?.pages?.length])


    return (
        <div style={{ padding: 12, width: 160, height: "100%", overflow: "hidden" }}>
            <Button
                type="primary"
                icon={<PlusOutlined />}
                style={{ width: "100%" }}
                onClick={() => {
                    setconfig(c => {
                        let newconfig = { ...c };
                        newconfig.pages = newconfig.pages ?? [];
                        let activeindex = newconfig.pages?.map(it => it.active).indexOf(true);
                        newconfig.pages?.forEach((it, i) => {
                            it.active = false
                        })
                        let { backgroundColor, width, height, unit } = newconfig;
                        if (activeindex != -1) {
                            newconfig.pages?.splice(activeindex + 1, 0, {
                                id: moment().valueOf(),
                                active: true,
                                backgroundColor: backgroundColor ?? "#FFFFFF",
                                width,
                                height,
                                unit
                            })
                        } else {
                            newconfig.pages?.push({
                                id: moment().valueOf(),
                                active: true,
                                backgroundColor: backgroundColor ?? "#FFFFFF",
                                width,
                                height,
                                unit
                            });
                        }
                        return newconfig
                    })
                }}
            >
                添加页面
            </Button>
            <Scrollbars
                thumbMinSize={10}
                autoHide
                style={{ width: '120%', height: "calc( 100vh - 118px)", marginTop: 12 }}
                hideTracksWhenNotNeeded={true}
                ref={scrollref}
            >
                {
                    !config?.pages ?
                        <div className={styles.emptybox}>
                            <Empty
                                image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                                imageStyle={{
                                    height: 60,
                                }}
                                description={
                                    <span>
                                        暂无页面
                                    </span>
                                }
                            />
                        </div>

                        : <SortContent
                            config={config}
                            setconfig={setconfig}
                            onSelect={(val) => {
                                console.log(val);
                            }}
                        ></SortContent>
                }
            </Scrollbars>
        </div>
    );
}

export default memo(Alayer);